<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上移下移</title>
    <style>
        * {
            margin: 0 auto;
            padding: 0;
            text-align: center;
        }
        
        table {
            width: 60%;
            border: 1px solid red;
            /* border-collapse: collapse; */
        }
        
        button {
            margin: 5px;
            padding: 0 10px;
        }
        
        table tbody tr:first-child td button:first-child,
        table tbody tr：last-child td button:last-child {
            cursor: not-allowed;
            border: 1px solid red;
        }
        
        .alert {
            width: 200px;
            height: 300px;
            border: 1px solid red;
            text-align: center;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: 0 auto;
            display: none;
        }
    </style>
</head>

<body>
    <div class="alert">
        删除成功
    </div>
    <table border="1" cellpadding="0" cellspacing="1">
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>爱好</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <!-- <tr>
                <td>1</td>
                <td>小黑</td>
                <td>20</td>
                <td>男</td>
                <td>计算机</td>
                <td>
                    <button>上移</button>
                    <button>删除</button>
                    <button>下移</button>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>小白</td>
                <td>18</td>
                <td>男</td>
                <td>唱歌</td>
                <td>
                    <button>上移</button>
                    <button>删除</button>
                    <button>下移</button>
                </td>
            </tr>
            <tr>
                <td>3</td>
                <td>小明</td>
                <td>16</td>
                <td>男</td>
                <td>绘画</td>
                <td>
                    <button>上移</button>
                    <button>删除</button>
                    <button>下移</button>
                </td>
            </tr>
            <tr>
                <td>4</td>
                <td>小红</td>
                <td>17</td>
                <td>女</td>
                <td>唱歌</td>
                <td>
                    <button>上移</button>
                    <button>删除</button>
                    <button>下移</button>
                </td>
            </tr>
            <tr>
                <td>5</td>
                <td>小强</td>
                <td>22</td>
                <td>男</td>
                <td>机械</td>
                <td>
                    <button>上移</button>
                    <button>删除</button>
                    <button>下移</button>
                </td>
            </tr> -->
        </tbody>
    </table>

    <script>
        var arr = [{
            'name': '小黑',
            'age': '20',
            'sex': '男',
            'hobby': '计算机'
        }, {
            'name': '小白',
            'age': '18',
            'sex': '男',
            'hobby': '唱歌'
        }, {
            'name': '小明',
            'age': '16',
            'sex': '男',
            'hobby': '绘画'
        }, {
            'name': '小红',
            'age': '17',
            'sex': '女',
            'hobby': '唱歌'
        }, {
            'name': '小强',
            'age': '22',
            'sex': '男',
            'hobby': '机械'
        }]

        var t = new Date().getTime();
        for (var index = 0; index < arr.length; index++) {
            t++;
            arr[index].id = t;
        }
        localStorage.arrLoaclData = JSON.stringify(arr);

        var tbody = document.querySelector('tbody');

        window.onload = function() {
            if (localStorage.arrLoaclData) {
                arr = JSON.parse(localStorage.arrLoaclData);
                render(arr);
            }
        }

        function render() {
            var str = '';
            for (var index = 0, len = arr.length; index < len; index++) {
                str += `
                    <tr>
                        <td>${index + 1}</td>
                        <td>${arr[index].name}</td>
                        <td>${arr[index].age}</td>
                        <td>${arr[index].sex == 1 ? '男' : '女'}</td>
                        <td>${arr[index].hobby}</td>
                        <td>
                            <button onclick="up(${ index })" ${ index == 0 ? 'disabled' : ''}>上移</button>
                            <button onclick="del(${arr[index].id})">删除</button>
                            <button onclick="down(${ index })" ${ index == len - 1 ? 'disabled' : ''}>下移</button>
                        </td>
                    </tr>
                `;
            }
            tbody.innerHTML = str;
        }

        function del(id) {
            console.log('id:', id);
            for (let index = 0; index < arr.length; index++) {
                if (id == arr[index].id) {
                    arr.splice(index, 1);
                }
            }
            document.getElementsByClassName('alert')[0].style.display = 'block';

            // localStorage.arrLoaclData = JSON.stringify(arr);
            render(arr);
            setTimeout(function() {
                document.getElementsByClassName('alert')[0].style.display = 'none';
            })
        }

        function up(index) {
            console.log('index:', index);
            if (index == 0) {
                return
            } else {
                arr.splice(index - 1, 0, arr[index]);
                arr.splice(index + 1, 1);
            }
            localStorage.arrLoaclData = JSON.stringify(arr);
            render(arr);
        }

        function down(index) {
            if (index == (arr.length - 1)) {
                return;
            } else {
                arr.splice(index + 2, 0, arr[index]);
                arr.splice(index, 1);
            }
            localStorage.arrLoaclData = JSON.stringify(arr);
            render(arr);
        }
    </script>
</body>

</html>